<template>
  <div class="data-page">
    <!-- <SearchBar 
      v-model="searchKeyword"
      @search="handleSearch"
    /> -->
    
    <DataList 
      :data-list="filteredDataList"
      @analysis="handleAnalysis"
      @manage="handleManage"
    />
  </div>
</template>

<script>
import SearchBar from '../components/SearchBar.vue';
import DataList from '../components/DataList.vue';

export default {
  name: 'DataPage',
  
  components: {
    SearchBar,
    DataList
  },
  
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  
  data() {
    return {
      searchKeyword: ''
    };
  },
  
  computed: {
    filteredDataList() {
      if (!this.searchKeyword) {
        return this.dataList;
      }
      return this.dataList.filter(item => 
        item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
    }
  },
  
  methods: {
    handleSearch() {
      if (this.searchKeyword) {
        this.$message({
          message: `搜索关键词：${this.searchKeyword}`,
          type: 'info'
        });
      }
    },
    
    handleAnalysis(item) {
      this.$emit('analysis', item);
    },
    
    handleManage(item) {
      this.$emit('manage', item);
    }
  },
  
  watch: {
    dataList() {
      // 切换菜单时清空搜索关键词
      this.searchKeyword = '';
    }
  }
};
</script>

<style scoped>
.data-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>

